import React,{ Component } from "react";
import "antd/dist/antd.css";
import store from "./store";
import {getInputChangeAction,getAddItemAction,getDeleteItemAction,getTodoList} from './store/actionCreators'
import TodolistUI from "./TodolistUI";


class Todolist extends Component{
    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleDelClick = this.handleDelClick.bind(this)
    }
    componentDidMount(){
        store.subscribe(this.handleStoreChange)
        const action = getTodoList();
        store.dispatch(action)
    }
    render(){
        return (
            <TodolistUI 
                inputValue = {this.state.inputValue}
                list = {this.state.list}
                handleInputChange = {this.handleInputChange}
                handleBtnClick = {this.handleBtnClick}
                handleDelClick = {this.handleDelClick}
            />
        )
    }
    handleStoreChange(){
        this.setState(store.getState())
    }
    handleInputChange(e){
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action)
    }
    handleBtnClick(){
        const action = getAddItemAction();
        store.dispatch(action)
    }
    handleDelClick(index){
        const action = getDeleteItemAction(index)
        store.dispatch(action)
    }
}
export default Todolist;